<div class="col-lg-12">
    <div>
        <div class="card col-md-12">
            <div class="wappper">
                <div class="card-header">
                    <h4 style="font-size: 20px">订单列表</h4>
                </div>
                <div id="order-list-body">
                </div>
            </div>
            <nav style="width: 500px;margin: auto">
                <ul class="pagination" id="page_nav-ul" style="display:flex;justify-content:space-between">
                    <li class="disabled">
                        <a>
                            <span><i class="mdi mdi-chevron-left"></i></span>
                        </a>
                    </li>
                    <li class="disabled">
                        <a>
                            <span><i class="mdi mdi-chevron-right"></i></span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>


<script>
    $(document).ready(function () {
        get_page(1);
    })

    // function load_page_nav(page_sum, page) {
    //     if (page_sum <= 0 || page <= 0) {
    //         document.getElementById("page_nav-ul").innerHTML = "<li class=\"disabled\"><a><span><i class=\"mdi mdi-chevron-left\"></i></span></a></li><li class=\"disabled\"><a><span><i class=\"mdi mdi-chevron-right\"></i></span></a></li>";
    //         return;
    //     }
    //     var pageNavString = "";
    //     //在第一页
    //     if (page === 1) {
    //         pageNavString += "<li class=\"disabled\">" +
    //             "  <a>" +
    //             "     <span><i class=\"mdi mdi-chevron-left\"></i></span>" +
    //             "  </a>" +
    //             "</li>";
    //         pageNavString += "<li class=\"active\"><a>1</a></li>";
    //     } else {
    //         pageNavString += "<li class=\"disabled\">\n" +
    //             "  <a onclick=\"get_page(" + (page - 1) + ")\" style=\"cursor: pointer\">\n" +
    //             "     <span><i class=\"mdi mdi-chevron-left\"></i></span>\n" +
    //             "  </a>\n" +
    //             "</li>";
    //         pageNavString += "<li><a onclick=\"get_page(" + (1) + ")\" style=\"cursor: pointer\">1</a></li>";
    //     }
    //     for (var i = 2; i < page_sum; i++) {
    //         if ((page - 3) === i) {
    //             pageNavString += "<li class=\"disabled\"><a>...</a></li>";
    //         }
    //         if ((page - 3 < i) && (i < page + 3)) {
    //             if (page === i) {
    //                 pageNavString += "<li class=\"active\"><a onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
    //             } else {
    //                 pageNavString += "<li><a onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
    //             }
    //         }
    //         if ((page + 3) === i) {
    //             pageNavString += "<li class=\"disabled\"><a>...</a></li>";
    //         }
    //     }
    //     //在最后一页
    //     if (page_sum === page) {
    //         if (page_sum > 1) {
    //             pageNavString += "<li class=\"active\"><a>" + page_sum + "</a></li>";
    //         }
    //         pageNavString += "<li class=\"disabled\">\n" +
    //             "  <a>" +
    //             "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
    //             "  </a>\n" +
    //             "</li>";
    //         pageNavString += "</div>";
    //     } else {  //不在最后一页
    //         if (page_sum > 1) {
    //             pageNavString += "<li><a onclick=\"get_page(" + page_sum + ")\" style=\"cursor: pointer\">" + page_sum + "</a></li>";
    //         }
    //         pageNavString += "<li>" +
    //             "  <a onclick=\'get_page(" + (page + 1) + ")\' style=\'cursor: pointer\'>\n" +
    //             "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
    //             "  </a>" +
    //             "</li>";
    //     }
    //     document.getElementById("page_nav-ul").innerHTML = pageNavString;
    // }

    function get_page(page) {
        var htmlString = "";
        var data = order_seller_list(localStorage.getItem("token"), page - 1);
        for (let orderIndex = 0; orderIndex < data.orderList.length; orderIndex++) {
            var order = data.orderList[orderIndex];
            var status = order.status;
            var orderId = order.orderId;
            var createTime = order.createTime;
            var actualPrice = order.actualPrice;
            var ifNotAllRefund = false;

            htmlString += '<div class="panel panel-info">\n' +
                '                        <div class="panel-heading" role="tab" id="' + "heading" + orderId + '">\n' +
                '                            <h4 class="panel-title">\n' +
                '                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"\n' +
                '                                   href="#' + "collapse" + orderId + '" aria-expanded="false" aria-controls="' + "collapse" + orderId + '">\n' +
                '                                    <div style="display: flex;justify-content:space-evenly">\n' +
                '                                        <div class="text-left">订单编码：' + orderId + '</div>\n' +
                '                                        <div class="text-left">订单状态：' + trans_to_order_status_span(status) + '</div>' +
                '                                        <div class="text-left">创建时间：' + createTime + '</div>\n' +
                '                                        <div class="text-left">总价格：￥' + actualPrice.toFixed(2) + '</div>\n' +
                '                                    </div>\n' +
                '                                </a>\n' +
                '                            </h4>\n' +
                '                        </div>\n' +
                '                        <div id="' + "collapse" + orderId + '" class="panel-collapse collapse" role="tabpanel"\n' +
                '                             aria-labelledby="' + "heading" + orderId + '">\n' +
                '                            <div class="panel-body">\n' +
                '                                <table>\n' +
                '                                    <thead>\n' +
                '                                    <tr class="row">\n' +
                '                                        <th class="col-md-1 text-center">\n' +
                '                                            商品图片\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-1 text-center">\n' +
                '                                            商品编号\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-5 text-left">\n' +
                '                                            商品标题\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-3 text-left">\n' +
                '                                            商品数量\n' +
                '                                        </th>\n' +
                '                                        <th class="col-md-2 text-left">\n' +
                '                                            商品状态\n' +
                '                                        </th>\n' +
                '                                    </tr>\n' +
                '                                    </thead>\n' +
                '                                    <tbody class="two_two">';
            for (let productIndex = 0; productIndex < order.productList.length; productIndex++) {
                var p = order.productList[productIndex];
                if (p.status === 1) {
                    ifNotAllRefund = true;
                }
                htmlString += '<tr class="row">\n' +
                    '                                        <td class="col-md-1 text-center">\n' +
                    '                                            <img src="' + p.filePath + '"\n' +
                    '                                                 style="height: 80px;width: 80px">\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-1 text-center">\n' +
                    '                                            <span style="line-height: 80px">' + p.productId + '</span>\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-5 text-left">\n' +
                    '                                            <span>' + p.title + '</span>\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-3 text-left">\n' +
                    '                                            <span style="line-height: 80px">' + p.number + '</span>\n' +
                    '                                        </td>\n' +
                    '                                        <td class="col-md-2 text-left">' + trans_to_order_good_status_span(p.status) +
                    '                                        </td>\n' +
                    '                                    </tr>';
            }
            htmlString += "</tbody>\n" +
                "                                </table>\n";
            if ((status === 2) && (ifNotAllRefund)) {
                htmlString += "<div class=\"text-center\">\n" +
                    "                                    <button class=\"btn btn-success\" onclick='order_seller_deliver("+orderId+")'>发货</button>\n" +
                    "                                </div>";
            }
            htmlString += "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>";
        }
        document.getElementById("order-list-body").innerHTML = htmlString;
        load_page_nav(Math.ceil(data.total / 20), page);
    }

    function trans_to_order_status_span(num) {
        if (num === 0) {
            return "<span class=\"label label-cyan\">订单已完成</span>";
        } else if (num === 1) {
            return "<span class=\"label label-warning\">订单未支付</span>";
        } else if (num === 2) {
            return "<span class=\"label label-primary\">已支付</span>";
        } else if (num === 3) {
            return "<span class=\"label label-default\">已取消</span>";
        } else {
            return "<span class=\"label label-danger\">订单状态错误</span>";
        }
    }

    function trans_to_order_good_status_span(num) {
        if (num === 0) {
            return "<span class=\"label label-warning\" style=\"line-height: 80px\">未支付</span>";
        } else if (num === 1) {
            return "<span class=\"label label-primary\" style=\"line-height: 80px\">待发货</span>";
        } else if (num === 2) {
            return "<span class=\"label label-primary\" style=\"line-height: 80px\">已发货</span>";
        } else if (num === 3) {
            return "<span class=\"label label-cyan\" style=\"line-height: 80px\">待评论</span>";
        } else if (num === 4) {
            return "<span class=\"label label-cyan\" style=\"line-height: 80px\">已评论</span>";
        } else if (num === 5) {
            return "<span class=\"label label-default\" style=\"line-height: 80px\">已退款</span>";
        }else{
            return "<span class=\"label label-danger\" style=\"line-height: 80px\">订单状态错误</span>";
        }
    }
</script>
